<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div+css页面布局</title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				background-color:white;	
			}
			#container{
				/*清除最外层的float属性*/
				clear: both;
				/*固定宽度值，防止使用百分比会随浏览器窗口大小变化*/
				width: 800px;	
				margin-left: auto;
				margin-right: auto;						
			}
			#header{
				width: 100%;
				height: 60px;
				background-color: beige;
				background-image: url(imgs/bg.jpg);
			}
			#center{
				width: 100%;
				height: 400px;
			}
			#footer{
				width: 100%;
				height: 60px;
				background-color: #F5F5DC;
			}
			#cLeft{
				width: 20%;
				height: 100%;
				float: left;
				background-color: burlywood;
			}
			#cRight{
				width: 80%;
				height: 100%;
				float: left;
				/*background-color: darkgrey;*/
			}
			.crows{
				width: 100%;
				clear: both;
				text-align: center;
				height: 82px;
			}
			.crImg{
				float:left;
				width: 20%;
				margin: 10px;
			}
			.crContent{
				float:left;
				width: 30%;
			}
			.crPrice{
				float:left;
				width: 20%;
				margin: 10px;
				padding:25px;
			}
			
			.crPrice strong {
				color: #F40;
				font-weight: 700;
				font-family: verdana, arial;
							
			}
		</style>
	</head>
	<body>
		<!----总范围  container---->
		<div id="container">
		<!----header---->
		<div id="header">
			header
		</div>
		<!----center---->
		<div id="center">
			<!---center:left---->
			<div id="cLeft">
				left
			</div>
			<!---center:right---->
			<div id="cRight">
				<!--每一行-->
				<div id="crow" class="crows">
					<div id="rowImg" class="crImg">
						<img src="imgs/row1.jpg"/>
					</div>
					<div id="rowImgConten" class="crContent">
						<p class="pconten">冠雅led小台灯护眼学习书桌阅读学生儿童卧室床头充电宿舍工作灯</p>
					</div>
					<div id="crPrice" class="crPrice">
						<strong>¥99.00</strong>
					</div>
				</div>
				<!--每一行-->
				<div id="crow" class="crows">
					<div id="rowImg" class="crImg">
						<img src="imgs/row1.jpg"/>
					</div>
					<div id="rowImgConten" class="crContent">
						<p class="pconten">冠雅led小台灯护眼学习书桌阅读学生儿童卧室床头充电宿舍工作灯</p>
					</div>
					<div id="crPrice" class="crPrice">
						<strong>¥99.00</strong>
					</div>
				</div>
				<!--每一行-->
				<div id="crow" class="crows">
					<div id="rowImg" class="crImg">
						<img src="imgs/row1.jpg"/>
					</div>
					<div id="rowImgConten" class="crContent">
						<p class="pconten">冠雅led小台灯护眼学习书桌阅读学生儿童卧室床头充电宿舍工作灯</p>
					</div>
					<div id="crPrice" class="crPrice">
						<strong>¥99.00</strong>
					</div>
				</div>
			</div>
		</div>
		<!---footer----->
		<div id="footer">
			footer
		</div>
		<!-------->
		</div>
	</body>
</html>
